<template>
  <svg viewBox="0 0 50 50" class="loading-svg">
    <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
  </svg>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 126;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 95, 126;
    stroke-dashoffset: -34px;
  }

  to {
    stroke-dasharray: 10, 126;
    stroke-dashoffset: -252px;
  }
}

@keyframes loading-svg-animation {
  to {
    transform: rotate(1turn);
  }
}

.loading-svg {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  transform-origin: center center;
  animation: loading-svg-animation 1s infinite linear;

  .path {
    stroke: var(--theme-color);
    stroke-width: 4;
    animation: loading-dash 1.5s ease-in-out infinite;
  }
}
</style>
